<template>
    <div class="category-manage-container">
        <div class="top-operation">
            <!-- 标签表格 -->
            <el-form :inline="true" :model="searchForm" class="search-form">
                <el-form-item label="标签名称">
                    <el-input v-model="searchForm.tagsName" placeholder="请输入标签名称" clearable
                        style="width: 240px;"></el-input>
                </el-form-item>
                <!-- 功能表格 -->
                <el-form-item>
                    <el-button type="primary" @click="getTagsList(1)">搜索</el-button>
                    <el-button type="success" @click="openAddModal">添加标签</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 标签列表 -->
        <el-table v-loading="listLoading" :data="tagsList" border stripe style="width: 100%; margin-top: 15px;">
            <el-table-column prop="name" label="标签名称" min-width=""></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="" align="center"></el-table-column>
            <el-table-column label="操作" width="100px" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" color="#f56c6c"
                        @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页控件 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageParams.current" :page-sizes="[10, 20, 30]" :page-size="pageParams.size"
            layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
            style="margin-top: 20px; text-align: right;"></el-pagination>

        <!-- 添加标签模态框 -->
        <el-dialog title="添加标签" :visible.sync="addModalVisible" width="400px" :before-close="closeAddModal">
            <el-form :model="addForm" label-width="80px" class="form-container">
                <el-form-item label="标签名称" required
                    :rules="[{ required: true, message: '请输入标签名称', trigger: 'blur' }, { max: 10, message: '最多输入10个字符', trigger: 'blur' }]">
                    <el-input v-model="addForm.name" placeholder="请输入标签名称" style="width: 260px;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAddModal">取消</el-button>
                <el-button type="primary" @click="submitAdd">确认添加</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'CategoryManage',
    data() {
        return {
            // 列表相关
            tagsList: [],
            listLoading: false,
            totalCount: 0,
            pageParams: { current: 1, size: 10 },
            searchForm: { tagsName: '' },

            // 添加模态框相关
            addModalVisible: false,
            addForm: '',

            // 编辑模态框相关
            editModalVisible: false,
            editForm: { id: '', name: '' }
        }
    },
    mounted() {
        this.getTagsList();
    },
    methods: {
        // 获取标签列表
        async getTagsList() {
            this.listLoading = true;
            try {
                const res = await this.$axios.post(
                    '/api/admin/tag/list',
                    {
                        ...this.pageParams,
                        tagsName: this.searchForm.tagsName
                    }
                );
                if (res.status == 200) {
                    console.log(res);
                    this.tagsList = res.data.data.records;
                    this.totalCount = res.data.data.total;
                } else {
                    this.$message.error(`获取标签列表失败：${res.data.message || '未知错误'}`);
                }
            } catch (err) {
                this.$message.error('接口请求异常，请稍后重试');
                console.error('TagsList request error:', err);
            } finally {
                this.listLoading = false;
            }
        },

        // 打开添加标签模态框
        openAddModal() {
            this.addModalVisible = true;
            this.addForm = { name: '' };
        },

        // 取消添加标签模态框
        closeAddModal() {
            this.addModalVisible = false;
            this.addForm = { name: '' };
        },

        // 添加标签
        async submitAdd() {
            try {
                const params = {
                    tags: [this.addForm.name]
                };
                const res = await this.$axios.post('/api/admin/tag/add', params)
                // this.addForm,
                console.log("成功前的：addform", params);
                if (res.status == 200) {
                    console.log("成功后的res", res);
                    this.closeAddModal();
                    this.getTagsList();
                    this.$message.success('标签添加成功');
                } else {
                    this.$message.error(`添加失败：${res.data.message || '未知错误'}`);
                }
            } catch (err) {
                this.$message.error('添加标签接口请求异常，请稍后重试');
                console.error('TagAdd request error:', err);
                console.log("失败后的addform", this.addForm);

            }
        },

        // 打开编辑标签模态框
        openEditModal(row) {
            this.editModalVisible = true;
            this.editForm = { ...row };
        },

        // 删除标签
        async handleDelete(tagId) {
            try {
                await this.$confirm('确定要删除该标签吗？删除后不可恢复！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });
                const res = await this.$axios.post(
                    '/api/admin/tag/delete',
                    { tagId }
                );
                if (res.status == 200) {
                    console.log("标签删除成功", res);
                    this.$message.success('标签删除成功');
                    this.getTagsList();
                } else {
                    this.$message.error(`删除失败：${res.data.message || '未知错误'}`);
                }
            } catch (err) {
                console.error('CategoryDelete request error:', err);
                this.$message.info('已取消删除');
            }
        },

        // 每页条数改变触发
        handleSizeChange(val) {
            this.pageParams.size = val;
            this.pageParams.current = 1;
            this.getTagsList();
        },

        // 当前页改变触发
        handleCurrentChange(val) {
            this.pageParams.current = val;
            this.getTagsList();
        }
    }
}
</script>

<style scoped>
.category-manage-container {
    padding: 20px;
}

.top-operation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.form-container {
    padding: 10px 0;
}
</style>